new Vue({
  el: '#container',
  data: {
    qiniu_url: VUE_APP_SERVER_QINIU_URL,
    // 查询关键字
    keyword: '',
    // 课程分类
    categoryTreeNodes: [],
    categoryTreeNodeIndex: -1,
    childrenTreeNodeIndex: -1,

    // 难度等级
    grades: [
      { id: '204001', grade: '初级' },
      { id: '204002', grade: '中级' },
      { id: '204003', grade: '高级' }
    ],
    gradeIndex: -1,

    // 排序字段
    sortFields: ['推荐', '最新', '热评'],
    sortIndex: 0,

    // 课程搜索
    pageNo: 1,
    pageSize: 2,
    pages: 1, // 页数量
    courses: [] // 课程列表
  },
  computed: {
    // 二级分类
    childrenTreeNodes: function() {
      if (!this.categoryTreeNodes.length) {
        return []
      }else{
        console.info(this.categoryTreeNodes)
      }
      let categoryTreeNodeIndex = this.categoryTreeNodeIndex

      if (categoryTreeNodeIndex === -1) {
        return this.categoryTreeNodes[0].childrenTreeNodes
      }
      return this.categoryTreeNodes[categoryTreeNodeIndex].childrenTreeNodes
    }
  },
  methods: {
    // 一级分类
    handleCategoryTreeNodeClick(index) {
      this.categoryTreeNodeIndex = index
      this.childrenTreeNodeIndex = -1
      // 刷新课程
      this.refreshPage()
    },
    // 二级分类
    handleChildrenTreeNodeClick(index) {
      this.childrenTreeNodeIndex = index
      // 刷新课程
      this.refreshPage()
    },
    // 难度等级
    handleGradeClick(index) {
      this.gradeIndex = index
      // 刷新课程
      this.refreshPage()
    },
    // 排序字段
    handleSortFieldClick(index) {
      this.sortIndex = index
      // 刷新课程
      this.refreshPage()
    },
    // 刷新课程
    refreshPage() {
      // 课程搜索
      this.pageNo = 1
      this.goPage(this.pageNo)
    },
    // 课程搜索
    goPage(nextPage) {
      let obj = {}
      let keyword = this.keyword
      if (keyword) {
        obj.keyword = keyword
      }
      let categoryTreeNodeIndex = this.categoryTreeNodeIndex
      if (categoryTreeNodeIndex !== -1) {
        obj.mt = this.categoryTreeNodes[categoryTreeNodeIndex].id
      }
      let childrenTreeNodeIndex = this.childrenTreeNodeIndex
      if (childrenTreeNodeIndex !== -1) {
        obj.st = this.childrenTreeNodes[childrenTreeNodeIndex].id
      }
      let gradeIndex = this.gradeIndex
      if (gradeIndex !== -1) {
        obj.grade = this.grades[gradeIndex].id
      }
      obj.sortFiled = this.sortFields[this.sortIndex]

      course_query(nextPage, this.pageSize, JSON.stringify(obj)).then(data => {
        this.pageNo = data.page
        this.pages = data.pages
        this.courses = data.items
      })
    },
    nextPage() {
      this.goPage(this.pageNo + 1)
    },
    prevPage() {
      let curPage = this.pageNo - 1
      curPage <= 0 ? 1 : curPage
      this.goPage(curPage)
    }
  },
  created() {
    // 课程分类
    category_tree_nodes().then(data => {
      this.categoryTreeNodes = data[0].categoryTreeNodes
      // TODO: 需要考虑点击搜索按钮的情况
      let keyword = localURL.searchParams.get('k')
      if (keyword) {
        this.keyword = keyword
      }
      let mt = localURL.searchParams.get('mt')
      if (mt) {
        this.categoryTreeNodeIndex = parseInt(mt, 10)
      }
      let st = localURL.searchParams.get('st')
      if (st) {
        this.childrenTreeNodeIndex = parseInt(st, 10)
      }

      // 课程搜索
      this.goPage(this.pageNo)
    })
  }
})
